<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分组订阅主题数据查询</title>

    <link rel="stylesheet" href="../../css/font-awesome.min.css" />
    <link rel="stylesheet" href="../../css/fa-font-awesome.min.css" />
    <link rel="stylesheet" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/animate.min.css" />
    <link rel="stylesheet" href="../../css/appbase.css" />
    <link rel="stylesheet" href="../../css/style.css" />

    <link rel="stylesheet" href="../../plugins/icheck/custom.css" />
    <link rel="stylesheet" href="../../plugins/jsonview/jquery.jsonview.min.css" />
    <style>
        .form-group-sm select.form-control {
            line-height: inherit;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" id="groupnav" group=""></a>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <table class="table table-bordered" id="topictable">
        <thead>
        <tr>
            <td>排序</td>
            <td>主题</td>
            <td>分区数</td>
            <td>偏移量</td>
            <td>日志大小</td>
            <td>剩余量</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>

<!-- 对话框,实时监控某一个主题 -->
<div class="open-dialog" id="monitorOffset">
    <div class="container-fluid">
        <div class="row form-inline">
            <button class="btn btn-primary btn-sm" name="refreshNow">
                <i class="fa fa-refresh"></i>
                <span>立即刷新</span>
            </button>
        </div>
        <div class="row padding-top">
            <table class="table table-bordered" >
                <thead>
                <tr>
                    <td>主题</td>
                    <td>分区</td>
                    <td>偏移量</td>
                    <td>日志大小</td>
                    <td>剩余量</td>
                    <td>最后更新时间</td>
                    <td>可设置最小值</td>
                    <td>设置</td>
                    <td>数据</td>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!--以 json 形式查看对话框 -->
<div class="open-dialog" id="jsonView">
    <div id="jsonViewLoad"></div>
</div>

<!--数据展示对话框-->
<div class="open-dialog" id="showdataDialog">
    <div class="col-xs-12">
        <form class="form-horizontal">
            <div class="form-group form-group-sm" >
                <label class=" col-xs-3 col-lg-2 control-label" >序列化:</label>
                <div class="col-xs-7 col-lg-6">
                    <select name="" class="form-control" id="serializeTools"></select>
                </div>
            </div>
            <div class="form-group-sm form-group">
                <table class="table table-striped table-bordered table-hover" id="datadetail">
                    <thead>
                        <tr>
                            <td>操作</td>
                            <td>偏移量</td>
                            <td>数据时间</td>
                            <td>数据</td>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" src="../../js/requirejs2.1.11-min.js"></script>
<script type="text/javascript" src="../config.js"></script>
<script type="text/javascript">
    require([ 'bootstrap', 'kafka/subscribeTopics' ]);
</script>
</body>
</html>